<template>
  <div v-if="message.content?.type == 7" v-html="md.render(message.content?.answer)"></div>
  <div class="cn" v-else>
    <div class="main-content">
      <img
        v-if="message.content?.answerType == 0"
        :src="message.content?.answer"
        alt="[图片]"
        style="padding-top: 10px; padding-bottom: 10px; width: 100px; height: 100px"
      />
      <template v-else-if="message.content?.answerType == 1">
        <template v-if="message.content.answer">
          <div v-html="contentFmt(message.content?.answer)"></div>
        </template>
        <template v-else>
          <span v-for="(item, index) in message.content.answers" :key="index">{{
            item.faqAnwserContent
          }}</span>
        </template>
      </template>
      <div
        v-else-if="message.content?.answerType == 2"
        v-html="contentFmt(message.content?.answer)"
      ></div>
      <div class="commonQuestion">
        <div
          v-if="
            message.content.type === 0 &&
            message.content.subQuestion &&
            message.content.subQuestion.length != 0
          "
          style="margin-top: 8px; color: #85a42c"
        >
          {{ message.content.relationQuestionGuideWords }}
        </div>
        <ul class="commonQuestion-list">
          <li
            v-for="item in state.commonQuestions"
            class="subquestion btn"
            :key="item.id"
            @click="getAnswer(item.id, item.question)"
          >
            {{ item.question }}
          </li>
        </ul>
      </div>
    </div>
    <div class="btns" v-if="enablePage || message.content.visibleAgent === 0">
      <el-button @click="commonQuestionRefresh" link type="primary" v-if="enablePage">
        <el-icon><RefreshRight /></el-icon>
        <!-- <img width="14" :src="transferIcon" style="margin-right: 6px" /> -->
        <span>换一批</span>
      </el-button>
      <el-button
        v-if="message.content.visibleAgent === 0"
        link
        type="primary"
        class="subquestion"
        @click="transferAgent"
      >
        <el-icon><Switch /></el-icon>
        <span>转人工</span>
      </el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, watch } from 'vue';
import chatApi from '@/lib/api/chat';
// import transferIcon from '@/assets/icons/svg/transfer.png';
import { RefreshRight, Switch } from '@element-plus/icons-vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
// 你用到了什么语言就要引入什么语言，目前我还不知道怎么样导入所有语言
import javascript from 'highlight.js/lib/languages/javascript';
//  这个是高亮的样式，有很多，我选了这个
import 'highlight.js/styles/ir-black.css';

hljs.registerLanguage('javascript', javascript);
const md = new MarkdownIt({
  highlight: function (str: string, lang: string) {
    const language = hljs.getLanguage(lang);
    if (language) {
      try {
        return `<div>
                        <div>
                            <span>${lang}</span>
                        </div>
                        <div class="hljs">
                            <code>${hljs.highlight(lang, str, true).value}</code>
                        </div>
                    </div>`;
      } catch (error) {
        console.error(error);
      }
    }
    // 如果未指定语言或无法识别语言，则使用默认的逃逸 HTML 处理
    return `<div class="hl-code">
                <div>
                    <span>${lang}</span>
                </div>
                <div class="hljs">
                    <code>${md.utils.escapeHtml(str)}</code>
                </div>
            </div>`;
  }
});

const props = defineProps<{
  workGroupConfig: any;
  message: any;
  transferAgent: any;
  getAnswer: any;
}>();
const enablePage = computed(
  () =>
    props.message.content.pageEnable == 0 &&
    props.message.content.subQuestion != null &&
    props.message.content.type == 3
);
const state = reactive({
  page: 1,
  limit: 1,
  commonQuestions: [] as any[],
  answers: [] as any[]
});

function contentFmt(val: string) {
  return val.replace(/\n/g, '<br/>');
}

watch(
  () => props.message.content,
  () => {
    state.page = 1;
    state.commonQuestions = props.message.content?.subQuestion;
    state.limit = props.message.content?.subQuestion?.length;
  },
  { immediate: true }
);

// 换一批
function commonQuestionRefresh() {
  state.page++;
  chatApi
    .getCommonQuestion({
      workGroupName: props.workGroupConfig.workgroupName,
      parentId: props.message.content.id,
      page: state.page
    })
    .then((res: any) => {
      var data = res.data;
      if (data) {
        const total = data.total;
        const pages = Math.ceil(total / state.limit);
        console.log('当前页数', pages);
        const list = data.records;
        if (list && list.length) {
          state.commonQuestions = list.map((item: any) => ({ ...item, question: item.question }));
          if (state.page >= pages || list.length == 0) {
            state.page = 0;
          }
        } else {
          state.page = 0;
        }
      }
    });
}
</script>
<style scoped lang="scss">
.cn {
  padding: 0px !important;
}
.main-content {
  padding: 8px 12px;
}
.btns {
  padding: 0px 12px;
  height: 32px;
  display: flex;
  align-items: center;
  border-radius: 0px 0px 8px 8px;
  border-top: 1px solid #dadada;
  gap: 10px;
  justify-content: center;
}
</style>
<style>
.commonQuestion-list {
  list-style: number;
}
.commonQuestion {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-left: 18px;
  .subquestion {
    margin-left: 0px;
    margin: 2px 0px;
    text-wrap: wrap;
    cursor: pointer;
    color: var(--el-color-primary);
  }
}
</style>
